Building sites with XHTML and css has become a bigger and bigger task over the last few years. Browsers seem to be getting upgraded every few months with entirely new browsers coming out too.
Front End Developers have their work cut out to be sympathetic to all these browsers and to do a good job. There are many methods to acheive this such as:
- Online Browser testing tools
- Javascript Browser detection
- Browser specific css
- Browser specific hacks
The main tool that often gets neglected is approaching the Build of the Front End in the correct way. Personally I prefer to use Firefox as my default browser and always start my Build process using this browser. Firefox is extremely difficult to hack but it has the best rendering engine. It has also been built very much with the Web and the way it works in mind. Most Internet Explorer Browsers allow for a small but effective piece of code to target the Browser:
<!--[if IE]> <link href="css/ie.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if IE 6]> <link href="css/ie6.css" rel="stylesheet" type="text/css"> <![endif]-->
This allows you to have a seperate file for specific Browsers. The rendering engine for various different browsers does differ and this is a useful thing to have.
Never get side-tracked and forget to test all browsers at every major step along the way. The best way is to just keep all the browsers you support open and when you finish a major structural section of the site, test, browser fix IE6 (a front end in joke – IE6 is a very old browser and notorious for breaking layouts) and you will not go too far wrong. Any issues that arise will need fixing at some point and this can be the difference between a professionally built site and one that has been thrown together.